<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文章编辑页面</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico"> 
    <link th:href="@{/admin/css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/admin/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/admin/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/webuploader.css}" rel="stylesheet">
    <link th:href="@{/admin/css/style.css?v=4.1.0}" rel="stylesheet">
    <style type="text/css">
    	#editor>div:last-child{
    		height: 500px !important;
    	}
    	#fileList{
    		width: 330px;
    		height: 247px;
    		margin-left: 83px;
    	}
    	#filePicker{
    		margin-left: 210px;
    	}
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content  animated fadeInRight article">
        <div class="row">
        <div class="col-sm-8">
                <div class="ibox float-e-margins">
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                    <div class="form-group">
                                        <label>文章标题</label>
                                        <input type="text" placeholder="此栏为文章的标题" th:value="${article.title}" id="title" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>摘要</label>
                                        <input type="text" placeholder="此栏为文章的摘要" th:value="${article.digest}" id="digest" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>作者</label>
                                        <input type="text" placeholder="文章作者" th:value="${article.author}" id="author" class="form-control">
                                    </div>
                                    <div class="form-group">
                                        <label>关键词</label>
                                        <input type="text" placeholder="关键词之间请用'#'号隔开" th:value="${article.keyWord}" id="keyWord" class="form-control">
                                    </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-4">
            	<!--dom结构部分-->
				<div id="uploader-demo">
				    <!--用来存放item-->
				    <div id="fileList" class="uploader-list">
				    	<div id="temp" class="file-item thumbnail">
				    		<img  alt="" src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1528170923935&di=15c0a177dde4530a4a5097a8ced03865&imgtype=0&src=http%3A%2F%2Fs10.sinaimg.cn%2Fmiddle%2F001UeKXOzy75TP8LaOZ69%26690">
				    		<div class="info" style="text-align:center;">文 章 封 面</div>
				    	</div>
				    </div>
				    <div id="filePicker">选择图片</div>
				</div>
            </div>
		</div>
		<div class="row" id="editor" th:utext="${article.content}">
            <!-- <div >
                <div class="ibox">
	                    <div class="ibox-content">
	                        <p>
	                            在不少旁观者的眼里，智能化几乎成了一种避之唯恐不及的“瘟疫”，开始攀附上大大小小、各式各样的工具和设备，从水杯、灯泡、体重秤这样的小物件，再到冰箱、洗衣机这些生活中的庞然大物。
	                        </p>
	                        <p>
	                            兜兜转转之后，这场“瘟疫”又找上了在生活中不那么起眼的自行车。然而，在搭上智能化的顺风车之前，你可知道自行车的历史？虽然，在乐视超级自行车的发布会上，它已经用了自行车史上有着重要地位的三个名字——斯塔利、西夫拉克、阿尔普迪埃——来命名自家的自行车，但那远远不够。Gizmodo 为我们梳理了自行车发展的关键节点。
	                        </p>
	                        <p>
	                            在开始之前，我们先来看看丹麦的设计师制作的动画，一分钟看完自行车近 200 年的演变。
	                        </p>  <p>
	                            在不少旁观者的眼里，智能化几乎成了一种避之唯恐不及的“瘟疫”，开始攀附上大大小小、各式各样的工具和设备，从水杯、灯泡、体重秤这样的小物件，再到冰箱、洗衣机这些生活中的庞然大物。
	                        </p>
	                        <p>
	                            兜兜转转之后，这场“瘟疫”又找上了在生活中不那么起眼的自行车。然而，在搭上智能化的顺风车之前，你可知道自行车的历史？虽然，在乐视超级自行车的发布会上，它已经用了自行车史上有着重要地位的三个名字——斯塔利、西夫拉克、阿尔普迪埃——来命名自家的自行车，但那远远不够。Gizmodo 为我们梳理了自行车发展的关键节点。
	                        </p>
						</div>
                    </div>
                </div> -->
            </div>
            
            <div class="pull-left" >
	             <button class="btn btn-white btn-default" type="button" id="edit">确认修改</button>
            </div>
    </div>

    <!-- 全局js -->
    <script th:src="@{/admin/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/admin/js/bootstrap.min.js?v=3.3.6}"></script>
    <script th:src="@{/js/webuploader.js}"></script>
	<!-- 注意， 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script th:src="@{/admin/js/wangEditor/wangEditor.min.js}"></script>
    <script th:inline="javascript">
    
    var coverImage;
	/**图片上传开始*/
	var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../../";
	var uploader = WebUploader.create({
		// 选完文件后，是否自动上传。
	    auto: true,
	    // swf文件路径
	    swf: applicationPath+'/js/Uploader.swf', 
	    // 文件接收服务端。
	    server: '/aixuegao-pc-web/file/upload/',
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',
	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: false,
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail">' +
	                '<img>' +
	                '<div class="info" style="text-align:center;">' + file.name + '</div>' +
	            '</div>'
	            ),
	        $img = $li.find('img');
	    $('#temp').remove();
	    // $list为容器jQuery实例
	    $('#fileList').append( $li );
	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	    }, 200, 200);
	});
	
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');
	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }
	    $percent.css( 'width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ,response) {
		coverImage=response.data;
	    $( '#'+file.id ).addClass('upload-state-done');
	});

	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');
	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }
	    $error.text('上传失败');
	});
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	/**封面图片上传结束*/
    var E = window.wangEditor
    var editor = new E('#editor');
    editor.customConfig.uploadImgMaxLength = 1;
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024;
    editor.customConfig.uploadImgServer = '/aixuegao-pc-web/file/upload/' ;
    editor.customConfig.uploadFileName = 'file';
    
    editor.customConfig.uploadImgHooks = {
    	    error: function (xhr, editor) {
    	    	alert('图片上传失败');
    	    },
    	    customInsert: function (insertImg, result, editor) {
    	        // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
    	        // insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
    	        // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
    	        console.log(result)
    	        var url = 'www.aixuegao-pc-web/aixuegaoimg/'+result.data
    	        insertImg(url);
    	    }
    	}
    editor.create();
    
        $('#edit').on("click",function(){
        	var json = {
					   title : $('#title').val(),
					   keyWord : $('#keyWord').val(),
					   content : editor.txt.html(),
					   id : [[${article.id}]],
					   author : $('#author').val(),
					   digest : $('#digest').val(),
					   coverImage : coverImage
				   };
			$.ajax({
				url :"/aixuegao-pc-web/admin/article/edit",
				type : "POST",
				dataType : "json",
				data :json,
				success : function(data,textStatus) {
					if(data.rspCode=='000000'){
						window.location.href='/admin/article/details/'+[[${article.id}]];
					}else{
						alert('编辑文章失败！');
					}
				}
			})	
        });   
    </script>
    <!-- 自定义js -->
    <script th:src="@{/admin/js/content.js?v=1.0.0}"></script>
</body>
</html>
